<template>
  <div id="cityList" ref="wrapper">
    <div class="city-box">
      
      
      <!-- 11111 -->
      <div class="box">
        <div class="title">
          当前城市
        </div>
        <div class="list">
          <div class="city-name">{{this.$store.state.tcity}}</div>
        </div>
      </div>
      
      
      <!-- 2222222 -->
      <div class="box">
        <div class="title">
          热门城市
        </div>
        <div class="list">
          <div class="city-name" @click="getCity">北京</div>
          <div class="city-name" @click="getCity">深圳</div>
          <div class="city-name" @click="getCity">香港</div>
          <div class="city-name" @click="getCity">上海</div>
          <div class="city-name" @click="getCity">广州</div>
          <div class="city-name" @click="getCity">重庆</div>
        </div>
      </div>
      
      
      <!-- 33333333 -->
      <div class="box" 
      v-for="(citys,index) in cities" 
      :key="index" 
      :ref='citys.initial'
      >
        <div class="initial">
          {{citys.initial}}
        </div>
         <div class="item" 
         v-for="(item,indexs) in citys.list" 
         :key="indexs"
         @click="getCity"
         >{{item.name}}</div>

      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'cityList',
  props:['cities','letter'],
  mounted() {
    this.scroll=new Bscroll(this.$refs.wrapper,{
      click:true
    })
  },
  watch:{
    letter(){
      const element = this.$refs[this.letter][0]
      this.scroll.scrollToElement(element)
    }
  },
  methods:{
    getCity(e){
      const city = e.target.innerText
      this.$store.dispatch('changeCity',city);
      this.$router.go(-1);
    }
  }
  
};
</script>

<style scoped>
#cityList{
  width: 100%;
  background-color: #000000;
  color: #FFFFFF;
  
}
#cityList .city-box{
  position: absolute;
  top: .8rem;
  left: 0;
  width: 100%;
  background-color: #000000;
}
#cityList .city-box .box{
  background-color: #222;
  margin-top: .2rem;
}
#cityList .city-box .box .title{
  height: .8rem;
  line-height: .8rem;
  margin-left: .3rem;
}
#cityList .city-box .box .list{
  width: 100%;
  overflow: hidden;
}
#cityList .city-box .box .list .city-name{
  width: 30%;
  height: .5rem;
  line-height: .5rem;
  font-size: .3rem;
  float: left;
  background-color: #333;
  margin-left: 2.5%;
  margin-bottom: .2rem;
  text-align: center;
}
#cityList .city-box .box .initial{
  height: .5rem;
  line-height: .5rem;
  background-color: #000000;
  padding-left: .3rem;
}
#cityList .city-box .box  .item{
  height: .8rem;
  line-height: .8rem;
  margin-left: .3rem;
}
</style>
